<template>
  <view>
    <view class="placeFloat " :class="[!props.isPlace ? 'dnone' : '']" :style="{ height: placeFloatHeight + 'px' }">
    </view>
    <view class="content" :class="[props.isFloatHeader ? 'float' : '']"
      :style="{ height: placeFloatHeight + 'px', backgroundColor: nowBgcolor }">
      <view class="status" :style="{ height: systeminfo.statusBarHeight + 'px' }"></view>
      <view class="navbar flex flex-row flex-row-center-start" :style="{ height: 44 + 'px' }">
        <view @click="backNav" v-if="props.showBack" style="height: 44px;width:90px" class="flex flex-row flex-row-center-start">
          <text class="tmicon tmicon-angle-left text-black px-20 py-10 text-white"></text>
        </view>
        <view v-if="props.showSearch" class="search flex flex-row flex-row-center-end">
          <input confirm-type="search" @input="emits('input', $event)" @focus="emits('input-focus', $event)"
            @blur="emits('input-blur', $event)" @confirm="emits('input-confirm', $event)" class="text-size-n input flex-1"
            placeholder="请输入关键词" placeholder-style="color:#9A9A9A;font-size:28rpx" />
          <view class="buttonSearch flex flex-center flex-shrink mr-4">
            搜索
          </view>
        </view>
        <slot></slot>

        <view v-if="props.showBack" style="height: 44px;width:110px" class="flex flex-row flex-row-center-start">
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
import { PropType } from "vue";
import { watch } from "vue";
const emits = defineEmits(['input-focus', 'input-blur', 'input-confirm', 'input'])
let systeminfo = uni.getSystemInfoSync();
let placeFloatHeight = ref((systeminfo?.statusBarHeight ?? 0) + 44);
const props = defineProps({
  /**
   * 是否悬浮
   */
  isFloatHeader: {
    type: Boolean,
    default: true
  },
  /**
   * 悬浮后是否在滚动页面到下面时悬浮并应用新的背景色。
   */
  isAutoFloatBgScroll: {
    type: Boolean,
    default: false
  },
  /**
   * 是否悬浮底部开启占位功能。
   */
  isPlace: {
    type: Boolean,
    default: false
  },
  pageScrollXY: {
    type: Object as PropType<{ x: number, y: number }>,
    default: () => {
      return { x: 0, y: 0 }
    }
  },
  navbarBgcolor: {
    type: [String, Array] as PropType<string[] | string>,
    default: ['transparent', '#fff']
  },
  showBack: {
    type: Boolean,
    default: false
  },
  showSearch: {
    type: Boolean,
    default: false
  }
})

const nowBgcolor = ref(Array.isArray(props.navbarBgcolor) ? props.navbarBgcolor[0] : props.navbarBgcolor)

watch(() => props.pageScrollXY, () => {
  if (!props.isAutoFloatBgScroll) return;
  if (props.pageScrollXY.y > 45) {
    nowBgcolor.value = Array.isArray(props.navbarBgcolor) ? props.navbarBgcolor[1] || "transparent" : props.navbarBgcolor
  } else {
    nowBgcolor.value = Array.isArray(props.navbarBgcolor) ? props.navbarBgcolor[0] || "transparent" : props.navbarBgcolor
  }
}, { deep: true, immediate: true })

function backNav() {
  uni.navigateBack({
    fail() {
      uni.reLaunch({
        url: '/pages/index/index'
      })
    }
  })
}
</script>
<style lang="less">
.search {
  width: 486rpx;
  height: 64rpx;
  border-radius: 32rpx;
  background: #fff;
}

.input {
  width: 100%;
  padding: 0 24rpx;
}

.buttonSearch {
  width: 115rpx;
  height: 56rpx;
  border-radius: 28rpx;
  background: #ff4e4e;
  color: white;
  font-size: 26rpx;
  line-height: 0;
}

.placeFloat {}

.dnone {
  display: none;
}

.float {
  left: 0;
  top: 0;
  position: fixed;
  z-index: 88;
}

.content {
  width: 100%;

  .status {}

  .navbar {
    gap: 12rpx;
  }
}
</style>
